<template>
  <view>
    <uv-popup :show="modelValue" :round="10" @close="onClose" mode="bottom">
      <view class="dialogbox dialogbox2">
        <!-- title -->
        <view class="dialogbox-title">请选择目的港</view>
        <view class="dialogbox-content dialogbox-content2">
          <!-- 搜索框 -->
          <view class="dialogbox-search">
            <uv-icon name="search" color="#C0C4CC" :size="22" />
            <view class="searchinput">
              <uv-input placeholder="请输入城市或港口中文/英文名称" v-model="portName" @change="getSearchPodPortList" clearable
                customStyle="height: 100%;" border="none" />
            </view>
          </view>
        </view>

        <!-- 港口列表 -->
        <view v-if="!portName" class="dialogbox-dest">
          <view class="dialogbox-dest-left">
            <view v-for="(item,index) in lineList" :key="item.PortLineId" class="dialogbox-dest-left-item"
              :class="lineIndex ==index?'dest-left-item-select':''" @click="changeLine(index)">
              {{ item.LineName }}
            </view>
          </view>
          <view class="dialogbox-dest-right" id="destbox">
            <view class="dest-right-item" v-for="item in podPortList" :key="item.Id" @click="checkPort(item)">
              <view class="dest-right-item-cn">{{item.CnPortName}}</view>
              <view class="dest-right-item-en">{{item.EnPortName}}</view>
            </view>
          </view>
        </view>
        <!-- 目的港搜索列表 -->
        <view v-if="portName" class="dest-searchbox">
          <template v-if="searchPodPortList.length>0">
            <view class="dest-right-item" v-for="item in searchPodPortList" :key="item.Id" @click="checkPort(item)">
              <view class="dest-right-item-cn">{{item.CnPortName}}</view>
              <view class="dest-right-item-en">{{item.EnPortName}}</view>
            </view>
          </template>
          <uv-empty mode="search" v-else></uv-empty>
        </view>
      </view>
    </uv-popup>
  </view>
</template>

<script>
	import request from '@/utils/request'
	export default {
		props: {
			modelValue: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				portName: '',
				podPortList: [],
				searchPodPortList: [],
				lineList: [],
				lineIndex: 0
			};
		},
		methods: {
			onClose() {
				this.$emit('update:modelValue', false)
			},
			getLineList: function() {
				request.get("/api/FRPortalPort/GetPortList").then(res => {
					if (!res.Data) return
					this.lineList = res.Data
					this.podPortList = res.Data[this.lineIndex].gangkou
					console.log(this.lineList);
				})

			},
			changeLine(i) {
				console.log(i);
				this.lineIndex = i;
				this.podPortList = this.lineList[this.lineIndex].gangkou
			},
			getSearchPodPortList() {
				request.get("/api/FRPort/GetFRPortList", {
					page: 1,
					limit: -1,
					PortName: this.portName
				}).then(res => {
					this.searchPodPortList = res.Rows
				})
			},
			checkPort(item){
				this.onClose()
				this.$emit('change',item)
			}
		},
		created() {
			this.getLineList()
			this.getSearchPodPortList()
		}
	}
</script>

<style lang="scss">
@import './app-select-podport.css'
</style>